import { Tabs,Input,Button,message  } from 'antd';
import {withRouter} from 'react-router-dom'
import {useState} from 'react'
import api from '@/service/index'
import {addLoginUser} from '../../redux/actions/loginUser'
// import axios from 'axios'

import './index.less'
import store from '../../redux/store';
// import { changeConfirmLocale } from '_antd@4.15.6@antd/lib/modal/locale';

const { TabPane } = Tabs;
function Home(props){

  const [loginUserName,setLoginUserName] = useState('')
  const [loginPassword,setLoginPassword] = useState('')
  // const [confirmPassword,setconfirmPassword] = useState('')
  const [confirmPassword,setconfirmPassword] = useState('')
  // const registerUserName = useState('')
  // const registerPassword = useState('')

  const changeUserName = (type,e)=>{
    const value = e.target.value
    switch(type){
      case 1:
        setLoginUserName(value)
        break
      case 2:
        setLoginPassword(value)
        break
      case 3:
        setconfirmPassword(value)
        break
      case 4:
        setLoginUserName(value)
        break
      default:
        break
    }
  }

  const callback = ()=>{
    setLoginUserName('')
    setLoginPassword('')
    setconfirmPassword('')
    console.log('change')
  }

  const toLogin = async ()=>{
    let params = {}
    params.phone = loginUserName
    params.password = loginPassword
    // let res = await axios.post(`/api/client/login/login`,params)
    let res = await api.user.login(params)
    if(res.code === 200){
      message.success('登录成功')
      props.history.push(`/home`)
      // let token = res.token
      store.dispatch(addLoginUser({loginUser:loginUserName}))

      localStorage.setItem('token',res.token)
    }
    console.log('res',res)
  }

  const toRegister = async () => {
    console.log(loginUserName,loginPassword,confirmPassword)
    let params = {}
    params.phone = loginUserName
    params.password = loginPassword
    let res = await api.user.register(params)
    if(res.code === 200){
      message.success('注册成功')
      store.dispatch(addLoginUser({loginUser:loginUserName}))
      console.log('mian',store.getState())
    }
  }

  return (
    <div className="login-container flex-center">
      <div className="center-BOX flex-center">
        <div className="notes">
          <h4>Java 正式发布</h4>
          <p>1995 年 5 月 23 日，Java 正式发布。Sun 在 SunWorld 95 大会上公开发布了 Java，一种面向对象的编程语言，具有跨平台、泛型编程、函数式编程等特性，由詹姆斯·高斯林任职 Sun 公司期间主导开发。</p>
          <span>
            <i></i>822
          </span>
        </div>
        <div className="main-login">
          <div className="inputBox">
            <Tabs defaultActiveKey="1" centered onChange={callback}>
              <TabPane tab="登录" key="1">
                <div className="input-cell">
                  <Input onChange={(event)=>{changeUserName(1,event)}} value={loginUserName} placeholder="账号" />
                </div>
                <div className="input-cell">
                  <Input.Password onChange={(event)=>{changeUserName(2,event)}} value={loginPassword} placeholder="密码" />
                </div>
                <p className="forget"><span>忘记密码</span></p>
                {/* disabled={loginUserName.current.value===''||loginPassword.current.value===''?true:false} */}
                <Button type="primary" onClick={toLogin} disabled={loginUserName===''||loginPassword===''?true:false}  block>立即登录</Button>
              </TabPane>
              <TabPane tab="注册" key="2">
                <div className="input-cell">
                  <Input onChange={(event)=>{changeUserName(1,event)}} value={loginUserName} placeholder="账号" />
                </div>
                <div className="input-cell">
                  <Input.Password onChange={(event)=>{changeUserName(2,event)}} value={loginPassword} placeholder="密码" />
                </div>
                <div className="input-cell">
                  <Input.Password onChange={(event)=>{changeUserName(3,event)}} value={confirmPassword} placeholder="确认密码" />
                </div>
                <Button type="primary" style={{marginTop:'5px'}} disabled={loginUserName!==''&&loginPassword!==''&&confirmPassword===loginPassword?false:true} onClick={toRegister} block>立即注册</Button>
              </TabPane>
            </Tabs>
          </div>
          <div className="other-text">
            <div className="text-Item">
              <p>注册即代表同意《服务协议》</p>
            </div>
          </div>
        </div>
      </div>
      {/* <h1>我是登录</h1> */}
    </div>
  )
}

export default withRouter(Home)